<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MediaStream</title>
</head>
<body style="text-align: center">

<div>
    <video id="player" controls playsinline style="width:300px;height: 300px;"></video>

    <video id="recPlayer" controls playsinline style="width:300px;height: 300px;"></video>
</div>
<div>
    <button id="record">Start Record</button>
    <button id="play" disabled>Play</button>
    <button id="download" disabled>Download</button>
</div>
</body>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>


<script>

    'use strict'

    //获取video标签

    var videoplay = document.querySelector("video#player")
    var videorecplay = document.querySelector("video#recPlayer")
    var btnRecord = document.querySelector("button#record")
    var btnPlay = document.querySelector("button#play")
    var btnDownload = document.querySelector("button#download")

    //
    var mediaRecorder;
    var buffer;
    //视频约束
    var constraints = {
        video: {
            width: {ideal: 1920},
            height: {ideal: 1080},
            frameRate: 15,
            facingMode: "enviroment"
        },
        audio: {
            noiseSuppression: true,
            echoCancellation: true
        }
    }
    if (!navigator.mediaDevices ||
        !navigator.mediaDevices.getUserMedia) {
        console.log('getUserMedia is not supported!');
    } else {
        navigator.mediaDevices.getUserMedia(constraints)
            .then((stream) => {
                //stream中包含了视频轨和音频轨
                videoplay.srcObject = stream

                //将Stream放到全局中
                window.stream = stream;
            })
            .catch((error) => {

                console.log('getUserMedia error:', error)
            });
    }

    function handleDataavilable(e) {
        if (e && e.data && e.data.size > 0) {
            buffer.push(e.data)
        }
    }

    function startRecord() {
        buffer = [];
        var option = {
            mimeType: 'video/webm;codecs=vp8'
            // mimeType:'video/webm'
        }
        //判断option中格式当前浏览器是否支持
        if (!MediaRecorder.isTypeSupported(option.mimeType)) {
            console.log('${option.mimeType} is not supported!')
            return;
        }
        try {
            mediaRecorder = new MediaRecorder(window.stream, option);
            mediaRecorder.ondataavailable = handleDataavilable;
            mediaRecorder.start(10);
        } catch (e) {
            console.error('Faild to create MediaRecorder:', e);
            return;
        }


    }

    function stopRecord() {
        mediaRecorder.stop();
    }

    //录制按钮事件
    btnRecord.onclick = () => {
        if (btnRecord.textContent === 'Start Record') {
            startRecord();
            btnRecord.textContent = 'Stop Record';
            btnPlay.disabled = true;
            btnDownload.disabled = true;
        } else {
            stopRecord();
            btnRecord.textContent = 'Start Record';
            btnPlay.disabled = false;
            btnDownload.disabled = false;
        }
    }

    //播放按钮
    btnPlay.onclick = () => {
        var blob = new Blob(buffer, {type: 'video/webm'});
        videorecplay.src = window.URL.createObjectURL(blob);
        videorecplay.srcObject = null;
        videorecplay.controls = true;
        videorecplay.play();

    }

    //下载
    btnDownload.onclick=()=>{
        var blob = new Blob(buffer,{type: 'video/webm'})
        var url = window.URL.createObjectURL(blob);
        //创建a标签超链接
        var a = document.createElement('a');
        a.href = url;
        a.style.display = 'none';
        a.download = 'test.mp4';
        a.click();
    }


</script>
</html>
